<template>
  <div class='detail-container page-container'>
    <div class='create-edit-post'>
      <h3>新建辖区企业</h3>
        <el-form :model='registerForm' status-icon :rules='rules' ref='registerForm' class='login-form'>
          <el-row :gutter="24">
            <el-col :span='12'>
              <el-form-item prop='cmpHScode' label='企业海关编码'>
                <el-input v-model='registerForm.cmpHScode' placeholder='请填写企业海关编码' class='normal-input'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item prop='cmpHSname' label='企业名称'>
                <el-input v-model='registerForm.cmpHSname' placeholder='请填写企业全称' class='normal-input'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span='24'>
              <el-form-item prop='address' label='办公地址'>
                <el-input v-model='registerForm.address' placeholder='请填写详细办公地址' class='normal-input'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span='12'>
              <el-form-item prop='contact' label='办公电话（座机）'>
                <el-input v-model='registerForm.contact' placeholder='请填写企业办公电话' class='normal-input'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span='12'>
              <el-form-item prop='username' label='负责人姓名'>
                <el-input v-model='registerForm.username' placeholder='请填写订单业务负责人' class='normal-input'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item prop='userphone' label='负责人手机'>
                <el-input v-model='registerForm.userphone' placeholder='请填写负责人手机号' class='normal-input'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span='1'>
              <el-form-item prop='checked'>
                <el-checkbox v-model="registerForm.checked" class='normal-check'>短信提醒</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type='primary' @click="submitForm('registerForm')" :loading='loading' style="width:120px">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>
<script>
import { register } from '@/api/corp';

export default {
  data() {
    return {
      swCode: '',
      swFlag: false,
      registerForm: {
        cmpHScode: '',
        cmpHSname: '',
        address: '',
        contact: '',
        username: '',
        userphone: '',
        checked: true
      },
      list: [],
      rules: {
        cmpHScode: [
          { required: true, message: '请输入辖区企业海关编码', trigger: 'blur' }
        ],
        cmpHSname: [
          { required: true, message: '请输入辖区企业的全称', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入企业现经营地址', trigger: 'blur' }
        ],
        username: [
          {
            required: true,
            message: '请输入企业外贸订单业务负责人',
            trigger: 'blur'
          }
        ],
        userphone: [
          {
            required: true,
            message: '请输入企业外贸订单业务负责人手机',
            trigger: 'blur'
          }
        ]
      },
      loading: false
    };
  },
  created() {},
  methods: {
    async submitForm(formName) {
      let that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
            that.loading = true;

            //注册
          register(
            that.registerForm.cmpHScode,
            that.registerForm.cmpHSname,
            that.registerForm.address,
            that.registerForm.contact,
            that.registerForm.username,
            that.registerForm.userphone,
            that.registerForm.checked
          )
            .then(data => {
              console.log('', data);
              that.loading = false;
              that.$message({
                message: '辖区企业注册成功！',
                type: 'success'
              });
              this.$router.replace({ path: '/area/index' });
            })
            .catch(function(error) {
              console.log(error);
              that.loading = false;
            });
        } else {
          that.$message.error('数据输入错误，请核对！');
        }
      });
    }
  }
};
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
@import 'src/styles/mixin.scss';
.page-container {
  width: 1000px;
}

.create-edit-post {
  padding: 20px;
  margin-left: 50px;
  text-align: center;
}

.normal-input {
  width: 100%;
}

.normal-check {
  width: 100%;
}
</style>
